<template>
    <div class="map">
      <div id="container"></div>
      <div class="latLng">
         <div class="" v-for="(item,index) of pointList" :key="index">
            <div>{{item.lat.toFixed(6)+','+item.lng.toFixed(6)}}</div>
        </div>
      </div>
    </div>
</template>
<script>
// import AMap from "AMap";
// console.log(AMap)
// import {
//   daolanLuxianList,
//   getLoopLine,
//   dancheStoreList,
//   storeMerchant,
//   daolanSotreList,
// } from "@/api/collect";
import {
  initAMap,
  gzpolyline,
  markerLayer,
  // setMapCenter,
  destroyMap,
} from "./handleTMap";

var geocoder, map, marker = null;
export default {
  name: "Map",
  props: { isSmall: { default: false, type: Boolean } },
  data() {
    return {
      pointList: [],
    };
  },

  mounted() {
    this.init()
  },
  methods: {
    init() {
      // initAMap(118.159461, 39.598976, "container");
      var TMap = window.TMap;
      var center = new TMap.LatLng(39.598976,118.159461);//设置中心点坐标
      //初始化地图
      var map = new TMap.Map(container, {
          center: center
      });
            
      //创建并初始化MultiMarker
      var markerLayer = new TMap.MultiMarker({
          map: map,  //指定地图容器
          //样式定义
          styles: {
              //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
              "myStyle": new TMap.MarkerStyle({ 
                  "width": 25,  // 点标记样式宽度（像素）
                  "height": 35, // 点标记样式高度（像素）
                  "src": '../img/marker.png',  //图片路径
                  //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                  "anchor": { x: 16, y: 32 }  
              }) 
          },
          //点标记数据数组
          // geometries: [{
          //     "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
          //     "styleId": 'myStyle',  //指定样式id
          //     "position": new TMap.LatLng(39.954104, 116.357503),  //点标记坐标位置
          //     "properties": {//自定义属性
          //         "title": "marker1"
          //     }
          // }, {//第二个点标记
          //     "id": "2",
          //     "styleId": 'marker',
          //     "position": new TMap.LatLng(39.994104, 116.287503),
          //     "properties": {
          //         "title": "marker2"
          //     }
          // }
          // ]
      }); 
      markerLayer.add([{//第1个点标记
          "id": "1",
          "styleId": 'marker',
          "position": new TMap.LatLng(39.598973, 118.159459),
          "properties": {
              "title": "marker4"
          }
        }
      ]);

      //折线------------------------------------ 
      //创建 MultiPolyline
      var polylineLayer = new TMap.MultiPolyline({
          id: 'polyline-layer', //图层唯一标识
          map: map,//设置折线图层显示到哪个地图实例中
          //折线样式定义
          styles: {
              'style_blue': new TMap.PolylineStyle({
                  'color': '#3777FF', //线填充色
                  'width': 6, //折线宽度
                  'borderWidth': 5, //边线宽度
                  'borderColor': '#FFF', //边线颜色
                  'lineCap': 'butt' //线端头方式
              }),
              'style_red': new TMap.PolylineStyle({
                  'color': '#CC0000', //线填充色
                  'width': 6, //折线宽度
                  'borderWidth': 5, //边线宽度
                  'borderColor': '#CCC', //边线颜色
                  'lineCap': 'round' //线端头方式
              })
          },
          //折线数据定义
          geometries: [
              // {//第1条线
              //     'id': 'pl_1',//折线唯一标识，删除时使用
              //     'styleId': 'style_blue',//绑定样式名
              //     'paths': [new TMap.LatLng(40.038540, 116.272389), new TMap.LatLng(40.038844, 116.275210), new TMap.LatLng(40.041407, 116.274738)]
              // },
              // {//第2条线
              //     'id': 'pl_2',   
              //     'styleId': 'style_red',
              //     'paths': [new TMap.LatLng(40.039492,116.271893), new TMap.LatLng(40.041562,116.271421), new TMap.LatLng(40.041957,116.274211)]
              // }
          ],
      });

      // var bbb=[
      //         [39.58714989823045,118.18836929084205],
      //         [39.6049967235634,118.19214366445954],
      //     ];

         
      //     //转为LatLng数组
      //     bbb = bbb.map(p => {
      //         return new TMap.LatLng(p[0], p[1]);
      //     });

      //     polylineLayer.add({//新的折线添加到图层中
      //         'id': 'pl_2',   
      //         'styleId': 'style_red',
      //         'paths': bbb
      //     })

      //监听点击事件添加marker
      map.on("click", (evt) => {
        console.log(evt)
          markerLayer.add({
            position: evt.latLng
          });     
          this.pointList.push(evt.latLng);   

          // var polyArray= [];
          // var aaaa=[
          //     [39.58714989823045,118.18836929084205],
          //     [39.6049967235634,118.19214366445954],
          //     [39.62455685008522,118.18236460018375],
          //     [39.6256139943357,118.17361491088809]
          // ];

          //  this.pointList.map((point) => {
          //   var latLng = [point.lat,point.lng];
          //   polyArray.push(latLng);
          // });
          //   console.log("====================================")
          //   console.log(polyArray)
          //   console.log("====================================")
          //   console.log("====================================")
          //   console.log(aaaa)
          //   console.log("====================================")
         
          // //转为LatLng数组
          // polyArray = polyArray.map(p => {
          //     return new TMap.LatLng(p[0], p[1]);
          // });
          // if(polyArray.length > 1){
          // polylineLayer.add({//新的折线添加到图层中
          //     'id': 'pl_2',   
          //     'styleId': 'style_red',
          //     'paths': polyArray
          // })
          // }
      });

    },

  // watch: {
  //   $route: {
  //     handler() {
  //       if (this.map) this.map.destroy();
  //       this.getInfo();
  //     },
  //     immediate: true,
  //   },
  // },

    destroyed() {
      destroyMap();
    },
  },
};
</script>


<style lang="scss" scoped>
@media screen and (max-height:900px) {
  
}
.map{
  width: 100%;
  height: 600px;
  display: flex;
}
#container {
  width: 80%;
  height: 100%;
  ::v-deep & > div {
    display: none;
  }
}

.latLng{
  width: 20%;
  color: #333333;
  text-align: center;
  font-size: 15px;
}

</style>